
<!-- 健康顾问管理 -->
<template>
  <div class="jq-table h-full flex-col" id="printArea">
    <div class="packageCardcontainer">
      <template v-for="boxContent in contentList" :key="boxContent?.title">
        <PackageCard class="card" :boxContent="boxContent" />
      </template>
    </div>
    <SearchForm
      @handle-reset-form-datas="handleResetFormDatas"
      :searchForm="searchForm"
      @handle-search="handleSearch"
      @chanFormValue="chanFormValue"
    />
    <div class="page-card h-full" v-loading="loading">
      <JqTable
        :tableColumn="tableColumn"
        :tableButtons="tableButtons"
        :itemsButtons="itemsButtons"
        :data="tableData"
        :page="page"
        @handle-selection-change="handleSelectionChange"
        @handle-size-change="handleSizeChange"
        @handle-current-change="handleCurrentChange"
      >
      <template #userStatusName>
          <el-table-column
            show-overflow-tooltip
            :min-width="80"
            prop="userStatusName"
            label="状态"
            fit="true"
            show-header="true"
            align="left"
          >
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <span :class="`point${scope.row.userStatus}`"></span>
                <span>{{ scope.row['userStatusName'] }}</span>
              </div>
            </template>
          </el-table-column>
        </template>
      </JqTable>
      <!-- <AddOrUpdate
        ref="addOrUpdateRef"
        :dialogDatas="dialogDatas"
        @clear-form-datas="clearFormDatas"
      /> -->
      <!-- <AddOrUpdateForStaff ref="addOrUpdateRefForStaff"
      @clear-form-datas="clearFormDatas"
        @onCancel="onCancel"
        @onConfirm="onConfirm"
      /> -->
      <AddOrUpdateForStaff v-if="showDialog" v-model:dialogVisible="showDialog" ref="addOrUpdateRef" :dialogDatas="dialogDatas"
        @update-list="updateList" />
  </div>
</div>
</template>

<script lang="ts" setup>
defineOptions({ name: 'HealthConsultant' });
import { reactive, ref, onMounted, computed,watch } from 'vue';
import { useTable } from '@/hooks/useTable';

import { JqTable } from '@/components/Table/index';
import { useRouteStore } from '@/store';

import AddOrUpdateForStaff from '@/views/system/staff/components/add-or-update/index.vue';

import { PackageCard } from '@/components/PackageCard/index';
import type { FormInstance } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';

import {
  getQueryDoctorRequest,
  getDoctorBannerRequest,
  getInfoRequest,
  exportRequest,
} from '@/api/healthConsultant';
import {
  orgOptionsRequest,
  getEnumListRequest,
  getCheckPointsOptionsRequest,
  roleOptionsRequest
} from '@/api/common';

interface Row {
  id: number;
  status: number;
  checkPointsId: number;
  statusConfig:object
};
const router = useRouter();
const routeStore = useRouteStore();
let checkPointsOptionsDatas = ref([]); //归属检测点下拉数据
let orgIdDatas = reactive([]); //归属组织下拉数据
let multipleSelection = reactive([]);
let searchFormParams = reactive([]); //查询参数
let enumListDatas = reactive([]); //状态下拉数据
let roleOptionsValue = ref([]); //角色下拉数据
const showDialog = ref(false)
const addOrUpdateRef = ref();
const addOrUpdateRefForStaff = ref();

const searchForm = reactive([
  {
    type: 'input',
    value: '',
    label: '顾问查询',
    placeholder: '请输入顾问查询',
    eName: 'keyword'
  },

  {
    type: 'select',
    value: '',
    label: '顾问状态',
    options: () => {
      return enumListDatas;
    },
    eName: 'userStatus'
  },
  {
    type: 'date',
    value: '',
    label: '创建时间',
    eName: 'createDate'
  },
  {
    type: 'select',
    value: '',
    label: '归属组织',
    placeholder: '全部',
    options: () => {
      return orgIdDatas;
    },
    eName: 'orgId'
  },
]);
const tableColumn = reactive([
  //内置
  { label: '健康顾问姓名', prop: 'employeeName',minWidth: '120' }, //接口缺少字段，待更新？
  { label: '归属组织机构', prop: 'orgName',minWidth: '120' },
  { label: '创建时间', prop: 'createTime',minWidth: '170' },
  { label: '最后一次检测时间', prop: 'lastCheckTime',minWidth: '170' },
  { label: '状态', prop: 'userStatusName',minWidth: '80',slot: true },
  { label: '手机号', prop: 'phone',minWidth: '120' },
  { label: '客户数', prop: 'clientCount',minWidth: '80' },
  { label: '已检测次数', prop: 'checkCount',minWidth: '100' }
]);
let tableButtons = reactive([
  //来源于数据
  {
    id: 32,
    type: '',
    perms: 'healdt:btn:export',
    label: '导出',
    onClick: async(row:{}) => {
      const params=Object.assign({},searchFormParams,{pageNum: page.page, pageSize: page.pageSize })
      const data: any =  await exportRequest(params)
      window.open(data.data);
    }
  },
]);
let dialogForBaseFormDatas = reactive([
  {
    type: 'input',
    value: '',
    label: '手机号码',
    eName: 'phone',
    placeholder: '请填写手机号码'
  },
  {
    type: 'input',
    value: '',
    label: '员工姓名',
    eName: 'employeeName',
    placeholder: '请填写顾问姓名'
  },

  {
    type: 'select',
    value: '',
    label: '归属组织机构',
    placeholder: '请选择归属组织',
    options: () => {
      return orgIdDatas;
    },
    eName: 'orgId'
  },
  {
    type: 'select',
    value: '',
    label: '状态',
    options: () => {
      return enumListDatas;
    },
    eName: 'userStatusName'
  },
  {
    type: 'select',
    value: 6,
    Ttype: 'multiple',
    label: '角色',
    options: () => {
      return roleOptionsValue.value;
    },
    eName: 'roleIds'
  },
  {
    type: 'select',
    value: '',
    label: '是否健康顾问', 
    options: () => {
      return [
        { name: '是', id: true },
        { name: '否', id: false }
      ];
    },
    eName: 'isHealthDoctor'
  }
]);
const dialogForAssistantFormDatas = reactive([
  {
    type: 'select',
    value: '',
    label: '归属检测点',
    options: () => {
      return checkPointsOptionsDatas.value;
    },
    eName: 'checkPointsId'
  },
  {
    type: 'input',
    value: '',
    label: '邮箱地址',
    eName: 'email'
  },
  {
    type: 'input',
    value: '',
    label: '当前职务',
    eName: 'currentPosition'
  },
  {
    type: 'input',
    value: '',
    label: '座机/分机',
    eName: 'telephone'
  },
  {
    type: 'radio',
    value: '',
    label: '员工性别',
    options: () => {
      return [
        { value: '男', label: 1 },
        { value: '女', label: 2 },
      ];
    },
    eName: 'gender'
  },
  {
    type: 'input',
    value: '',
    label: '所属部门',
    eName: 'department'
  },
  {
    type: 'input',
    value: '',
    label: '学历',
    eName: 'education'
  },
  {
    type: 'input',
    value: '',
    label: '工号',
    eName: 'education'
  },
  {
    type: 'input',
    value: '',
    label: '籍贯',
    eName: 'nativePlace'
  },
  {
    type: 'input',
    value: '',
    label: '毕业院校',
    eName: 'almaMater'
  },
  {
    type: 'input',
    value: '',
    label: '毕业时间',
    eName: 'graduationDate'
  },
  {
    type: 'input',
    value: '',
    label: '所学专业',
    eName: 'major'
  },
  {
    type: 'textarea',
    value: '',
    label: '备注',
    eName: 'notes'
  }
]);
let itemsButtons = reactive([
  //来源于数据

  {
    id: 30,
    type: 'success',
    label: '查看',
    perms: 'healdt:btn:view',
    // onClick: (row: Row) => {
    //   setDialogDefaultDatas(row, 'check');
    // }
    onClick: (row: Row) => {
      // router.push('/myTest');
      showDialog.value = true
      dialogDatas = {
        title: '查看',
        type: 'check',
        datas: row
      };
    }
  }
]);
const contentList = reactive([
  {
    title: '本月新增顾问',
    number: '',
    bgUrl: 'Bg.png',
    iconUrl: 'Icon.png'
  },
  {
    title: '顾问总数',
    number: '',
    bgUrl: 'Bg2.png',
    iconUrl: 'Icon2.png'
  },
  {
    title: '合作中顾问',
    number: '',
    bgUrl: 'Bg3.png',
    iconUrl: 'Icon3.png'
  },
  {
    title: '暂停合作的顾问',
    number: '',
    bgUrl: 'Bg4.png',
    iconUrl: 'Icon4.png'
  },
  {
    title: '待激活的顾问',
    number: '',
    bgUrl: 'Bg5.png',
    iconUrl: 'Icon5.png'
  }
]);


const currentMenudatas = computed(() => routeStore.currentMenudatas);
const onCancel = () => {//取消
  clearFormDatas();
  addOrUpdateRefForStaff.value.handleDialog(false);
};
const onConfirm = () => {
  clearFormDatas();
  addOrUpdateRefForStaff.value.handleDialog(false);
};


const onaddOrUpdateForStaff = (data?: Recordable) => {
  addOrUpdateRefForStaff.value.init(data);
  addOrUpdateRefForStaff.value.handleDialog(true);

};
const updateList = () => {
  getList();
  getStatisticseRequest();
  showDialog.value = false
}
let dialogDatas = reactive({});
const { tableData, page, loading, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: getQueryDoctorRequest,
    params:()=> searchFormParams
  });

const chanFormValue=(formParamsDatats:{})=>{
  searchFormParams=formParamsDatats
};
/* 表格多选事件 */
const handleSelectionChange = (val: []) => {
  multipleSelection = val;
};
/* 表单查询 */
const handleSearch = (searchFormParamsDatats: {}) => {
  Object.assign(searchFormParams, searchFormParamsDatats);
  getList();
};
/*清除表单值 */
const clearFormDatas = () => {
  // dialogForConfigDatas = dialogForConfigDatas.map((item) => {
  //   if (item.value) {
  //     if (item.type === 'cascader') {
  //       item.value = [];
  //     } else {
  //       item.value = '';
  //     }
  //   }
  //   return item;
  // });
};
/* 高级搜索重置 */
const handleResetFormDatas = () => {
  searchFormParams={}
  searchForm.forEach((item) => {
    // if (item.value) {
      if (item.type === 'cascader') {
        item.value = [];
      } else {
        item.value = '';
      }
    // }
  });
 getList();

};



//设置弹出框内表单回显数据
const setDialogDefaultDatas = async (row: any, type: any) => {
  const data: any = await getInfoRequest({ id: row.id });
  const datas = data.data;
  const roleOptions: any = await roleOptionsRequest({ orgId: datas.orgId });
  roleOptionsValue.value = roleOptions.data;

  const checkPoints: any = await getCheckPointsOptionsRequest({ name: '', orgId: datas.orgId });
  checkPointsOptionsDatas.value = checkPoints.data;
   dialogForBaseFormDatas.forEach((d) => {
    d.value =datas[d.eName];
    roleOptionsValue.value = d.value = datas[d.eName];
  });

  dialogForAssistantFormDatas.forEach((d) => {
    d.value = datas[d.eName];
    if(d.eName==='checkPointsId'){
      d.value=datas.checkPoints
    }
  })

  dialogDatas = {
    title: '查看',
    type: type,
    id: row.id,
    dialogForBaseFormDatas: dialogForBaseFormDatas,
    dialogForAssistantFormDatas: dialogForAssistantFormDatas
  };
  onaddOrUpdateForStaff(dialogDatas);
};

const getStatisticseRequest = async () => {
  const data: any = await getDoctorBannerRequest({});
  const statisticsDatas = data.data;
  contentList[0].number = statisticsDatas.newDoctor;
  contentList[1].number = statisticsDatas.all;
  contentList[2].number = statisticsDatas.onService;
  contentList[3].number = statisticsDatas.noService;
  contentList[4].number = statisticsDatas.waitService;
};
/* 获取归属检测点数据 */
const getCheckPointsOptionsDatas = async (value:number) => {
  const data: any = await getCheckPointsOptionsRequest({ name: '', orgId: value });
  checkPointsOptionsDatas.value = data.data;
};
/* 归属组织 */
const getOrgOptionsDatas = async () => {
  const data: any = await orgOptionsRequest({ containBase: false });
  orgIdDatas = data.data;
};
//根据数据返回按钮信息控制权限
/* params
{
  datas:本地配置的按钮数据（tableButtons/itemsButtons)
}
*/
const tableButtonsPermission = (datas: any[], datas1: any[]) => {
  return datas.filter(function (item1: { perms: string }) {
    return datas1.find(function (item2: { perms: string }) {
      return item1.perms === item2.perms;
    });
  });
};
/* 获取设备状态数据 */
const getEnumListDatas = async () => {
  const data: any = await getEnumListRequest({ enumName: 'AdminUserStatusEnum' });
  enumListDatas = data.data;
};
// 角色下拉
const getRoleOptions = async (value:number) => {
  const data: any = await roleOptionsRequest({ orgId: value });
  roleOptionsValue.value = data.data;
};
// /*获取员工信息 */
// const getInfoDatas = async (datas: {}) => {
//   const data: any = await getInfoRequest(datas);
// };

/*获取列表数据 */
// const getQueryDoctorDatas = async (datas: {}) => {
//   const data: any = await getQueryDoctorRequest(datas);
// };

onMounted(() => {
  // getQueryDoctorDatas(),
  getStatisticseRequest();
  // getCheckPointsOptionsDatas();
  getOrgOptionsDatas();
  // getRoleOptions();
  if(!currentMenudatas.value) {
    return
  }
  tableButtons = tableButtonsPermission(tableButtons, currentMenudatas.value.tableButtons); //tableButtons根据数据返回按钮信息控制权限
  itemsButtons = tableButtonsPermission(itemsButtons, currentMenudatas.value.itemsButtons); //itemButtons根据数据返回按钮信息控制权限
  getEnumListDatas();
});
</script>

<style scoped media="print">
.packageCardcontainer {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  > .card {
    flex: 0 0 18%;
    min-width: 18%;
    margin-right: calc(9.99% / 4);
    margin-bottom: 10px;
    /* // 每行最后一个卡片 */
    &:nth-child(5n) {
      margin-right: 0;
    }

    /* // 最后一个卡片 */
    &:last-child {
      margin-right: auto;
    }
  }
}
</style>
